<figure>
	<img src="img/map.jpg" alt="" />
	<figcaption>
		<h2>缩放动画</h2>
		<p>嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</p>
		<div />
	</figcaption>
</figure>

<style>
	figure,
	figcaption,
	h2,
	p {
		margin: 0;
		padding: 0;
	}
	figure {
		position: relative;
	}
	figure img {
		width: 100%;
	}
	figcaption {
		position: absolute;
		top: 60px;
		left: 50px;
	}
	figcaption div {
		width: 300px;
		height: 200px;
		border: #eccc68 5px solid;
		top: -30px;
		left: -20px;
		position: absolute;
	}
	figure figcaption div {
		transition: all 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.3s;
	}

	img {
		transition: all 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.1s;
	}
	h2,
	p {
		transition: all 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.8s;
	}
	figure:hover img {
		scale: 1.2;
		opacity: 0.5;
		transform-origin: top left;
	}
	figure:hover div {
		scale: 1.3;
		rotate: 180deg;
		opacity: 0;
	}
	figure:hover h2 {
		transform: translateX(50px);
		opacity: 0.5;
	}
	figure:hover p {
		transform: translateY(50px);
		opacity: 0;
	}
</style>
